<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
            font-family: Arial, sans-serif;
            background-color: #e0f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 120vh;
            margin: 10;
        }
input[type=text], input[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 7px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 6px;
  background-color: #e0f7fa;
  padding: 20px;
}
</style>
</head>
<body>
    <div class="container mt-5 p-5 border rounded shadow">
        <form action="send_email.php" method="post">
            <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] = bin2hex(random_bytes(32)); ?>">
            <label for="fullname">Full Name:</label>
            <input type="text" class="form-control mt-2" name="fullname" id="fullname" placeholder="Enter Name" required maxlength="100">
            <label for="email" class="mt-4">Email:</label>
            <input type="email" class="form-control mt-2" name="email" id="email" placeholder="Enter Email" required maxlength="100">
            <label for="subject" class="mt-4">Subject:</label>
            <input type="text" class="form-control mt-2" name="subject" id="subject" placeholder="Enter Subject" required maxlength="200">
            <label for="message" class="mt-4">Message:</label>
            <textarea class="form-control mt-2" name="message" id="message" cols="30" rows="10" placeholder="Enter Message" required maxlength="1000"></textarea>
            <input type="submit" class="btn btn-primary mt-4" value="Send" name="send">
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-YvpcrYf0tY3Hwv82GFa+uaK9FAPX27mgtJSeA6kD3pVRHjRrzIV9ik6i+WhL0y0A" 
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

   
  <script>
    var messageText = "<?= htmlspecialchars($_SESSION['status'] ?? '', ENT_QUOTES, 'UTF-8'); ?>";
    if (messageText !== '') {
        Swal.fire({
            title: "Contact Form",
            text: messageText,
            icon: messageText.includes("Thank you") ? "success" : "error",
            timer: 3000,
            showConfirmButton: false
        });
    }
</script>

<?php unset($_SESSION['status']); ?>
